<template>
	<div class="headerContent">
		<div class="titleAndLogo">
			<!-- <div class="logoDiv"></div> -->
			<div class="titleDiv">
				<!-- <div class="bigTitle">四川高速</div> -->
				<div class="smallTitle">
          <img v-if="logoImgShow" :src="logoImgURL" alt="" style="height: 24px; width: 24px"/>
          &nbsp;
          {{ baseInfo.headerTitle }}
        </div>
			</div>
		</div>
		<div class="roleAndLogout">
			<div class="userDiv" @click="handlerUserChangePassword">
				<i class="wj-icon-jurassic_user"></i>
				<span>{{ employeeName }}</span>
			</div>
			<div class="logoutDiv" v-if="btnBool" @click="photoelectricityBtnEvent">
				<i class="el-icon-bell"></i>
				<span>关闭灯光</span>
			</div>
			<div class="logoutDiv" v-if="btnBool_audit" @click="clearLogBtnEvent">
				<i class="el-icon-remove-outline"></i>
				<span>日志清除</span>
			</div>
			<div class="logoutDiv" @click="loginOut">
				<i class="wj-icon-logout"></i>
				<span>退出</span>
			</div>
		</div>
	</div>
</template>
<script>
import {loginOutFun, system_companyInfo} from "@/utils/request/api";
import baseInfo from "@/utils/config/baseInfo.json";
import axios from "axios";

export default {
	name: "Header",
	data() {
		return {
			baseInfo: baseInfo,
			employeeName: "",
			btnBool: false, // 监控组光电按钮
			btnBool_audit: false, // 审计员 清理日志
      logoImgURL: "https://" + window.location.host + "/images/" + "logo.png",
      logoImgShow: false,
		};
	},
	watch: {
		$route: {
			immediate: true,
			deep: true,
			handler(newVal, oldVal) {
				console.log(newVal, oldVal);
				if (newVal.path === "/monitoring") {
					this.btnBool = true;
				} else if (newVal.path === "/index/audit" || newVal.path === "/index/inside"  || newVal.path === "/index/simHistory" || newVal.path === "/index/approveLog") {
					this.btnBool_audit = true;
				} else {
					this.btnBool = false;
					this.btnBool_audit = false;
				}
			},
		},
	},
	created() {
    this.getOem();
  },
	mounted() {
		this.employeeName = localStorage.getItem("employeeName");
    this.headTitleLogo();
	},
	methods: {
    async getOem(){
      await system_companyInfo().then(res => {
        if (res.code === 200) {
          this.baseInfo = res.data;
        }
      });
    },
		// 注销
		loginOut() {
			this.$confirm("请确认是否退出登录 ?", "温馨提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					// 确认操作
					loginOutFun({
						id: localStorage.getItem("employeeId"),
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							// console.log(this.$store.state.token)
							this.$store.commit("set_token", null);
							localStorage.clear();
							this.$router.push(
								{ path: "/login" },
								(onComplete) => {
									console.log(onComplete);
								},
								(onabort) => {
									console.log(onabort);
								}
							);
						} else {
							this.$msg.error("注销失败！");
						}
					});
				})
				.catch(() => {
					// 取消操作
					this.$msg.info("已取消操作！");
				});
		},
		// 光电按钮  关闭灯光
		photoelectricityBtnEvent() {
			this.$emit("closeLightwarning");
		},
		// 审计员 清理日志
		clearLogBtnEvent() {
			this.$emit("eliminateLog");
		},
		// 处理用户修改密码
		handlerUserChangePassword() {
			this.$router.push(
				{ path: '/changeUserPassword' },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
    async headTitleLogo() {
      try {
        const response = await axios.head(this.logoImgURL);
        if (response.status === 200) {
          this.logoImgShow = true;
        }
      } catch (error) {
        console.log(1);
      }
    }
	},
};
</script>
<style lang="less" scoped>
.headerContent {
	width: 100%;
	height: 68px;
	background: #444;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	.titleAndLogo {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.logoDiv {
			width: 102px;
			height: 68px;
			background: peachpuff;
			margin: 0 0 0 18px;
		}
		.titleDiv {
			height: 68px;
			margin: 0 0 0 18px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: flex-start;
			.bigTitle,
			.smallTitle {
				font-size: 24px;
				line-height: 1;
				color: #fff;
        display: inline-flex;
        align-items: center;
			}
		}
	}
	.roleAndLogout {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		.userDiv,
		.logoutDiv {
			margin: 0 24px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			/deep/ .el-icon-bell {
				font-size: 28px;
				margin-right: 6px;
				color: #fff;
			}
			/deep/ .el-icon-remove-outline {
				font-size: 28px;
				margin-right: 6px;
				color: #fff;
			}
			.wj-icon-logout,
			.wj-icon-jurassic_user {
				font-size: 28px;
				margin-right: 6px;
				color: #fff;
			}
			span {
				font-size: 18px;
				color: #fff;
			}
		}
		.logoutDiv:hover {
			cursor: pointer;
		}
	}
}
</style>
